<template>
  <div>
    <el-tabs
      type="border-card"
      style="margin: 0 20px; height: 93vh"
      @tab-click="tabChange"
      v-model="$store.state.activeName5"
    >
      <el-tab-pane label="数据预警" name="数据预警">
        <el-scrollbar style="height: 80vh">
          <el-table :data="tableData" stripe>
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="数据预警原因"
              prop="warnDesc"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警发生时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警最新发送邮件时间"
              prop="lastMailTime"
              align="center"
            ></el-table-column>
            <el-table-column label="预警状态" prop="warnStatus" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.warnStatus === '正常'"
                  size="small"
                  type="success"
                  >正常</el-button
                >
                <el-button
                  v-if="scope.row.warnStatus === '数据预警'"
                  size="small"
                  type="danger"
                  >数据预警</el-button
                >
                <el-button
                  v-if="scope.row.warnStatus === '预警处理中'"
                  size="small"
                  type="warning"
                  >预警处理中</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="warnStatus" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="
                    scope.row.warnStatus === '数据预警' ||
                    scope.row.warnStatus === '预警处理中'
                  "
                  size="small"
                  type="danger"
                  @click="point(scope.row.id)"
                  >点击处理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="设备预警" name="设备预警">
        <el-scrollbar style="height: 80vh">
          <el-table :data="tableData2" stripe>
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="设备预警原因"
              prop="warnDesc"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警发生时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警最新发送邮件时间"
              prop="lastMailTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警状态"
              prop="equipmentWarnStatus"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '00'"
                  type="success"
                  size="small"
                  >正常</el-button
                >
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '01'"
                  type="danger"
                  size="small"
                  >数据预警</el-button
                >
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '02'"
                  type="warning"
                  size="small"
                  >预警处理中</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              prop="equipmentWarnStatus"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="
                    scope.row.equipmentWarnStatus === '01' ||
                    scope.row.equipmentWarnStatus === '02'
                  "
                  type="danger"
                  size="small"
                  @click="point2(scope.row.id)"
                  >点击处理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="预警处理" :visible.sync="dialog_flag">
      <el-form
        :model="form"
        size="medium"
        :label-position="labelPosition"
        :label-width="labelWidth"
      >
        <el-form-item label="处理方式">
          <el-select
            v-model="form.mode"
            placeholder="请选择预警处理方式"
            style="display: flex"
          >
            <el-option label="数据恢复正常" value="00"></el-option>
            <el-option label="1小时内不预警" value="01"></el-option>
            <el-option label="6小时内不预警" value="02"></el-option>
            <el-option label="1天内不预警" value="03"></el-option>
            <el-option label="3天内不预警" value="04"></el-option>
            <el-option label="7天内不预警" value="05"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="备注说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog_flag = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="预警处理" :visible.sync="dialog_flag2">
      <el-form
        :model="form2"
        size="medium"
        :label-position="labelPosition"
        :label-width="labelWidth"
      >
        <el-form-item label="处理方式">
          <el-select
            v-model="form2.mode"
            placeholder="请选择预警处理方式"
            style="display: flex"
          >
            <el-option label="数据恢复正常" value="00"></el-option>
            <el-option label="1小时内不预警" value="01"></el-option>
            <el-option label="6小时内不预警" value="02"></el-option>
            <el-option label="1天内不预警" value="03"></el-option>
            <el-option label="3天内不预警" value="04"></el-option>
            <el-option label="7天内不预警" value="05"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form2.remark"
            placeholder="备注说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog_flag2 = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handle2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "WarningManagementChart",
  props: {
    node: Object,
  },
  data() {
    return {
      tableData: null,
      tableData2: null,
      rowKey: null,
      dialog_flag: false,
      form: {
        mode: "",
        remark: "",
      },
      dialog_flag2: false,
      form2: {
        mode: "",
        remark: "",
      },
      labelPosition: "left",
      labelWidth: "90px",
      activeName: "数据预警日志",
      form: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        sensorName: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form2: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        equipmentName: "",
      },
      tableData2: null,
      pageData2: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form3: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        sensorName: "",
      },
      tableData3: null,
      pageData3: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
    };
  },
  methods: {
    tabChange(tab) {
      this.$store.dispatch("getTabName5", tab.paneName);
    },
    dataWarn(list) {
      for (let i = 0; i < list.length; i++) {
        if (
          list[i].warnTime != undefined &&
          list[i].warnTime != null &&
          list[i].warnTime != ""
        )
          list[i].warnTime = moment(list[i].warnTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        if (
          list[i].lastMailTime != undefined &&
          list[i].lastMailTime != null &&
          list[i].lastMailTime != ""
        )
          list[i].lastMailTime = moment(list[i].lastMailTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        if (
          list[i].dataWarnStatus == "00" &&
          list[i].middleWarnStatus == "00" &&
          list[i].relativeWarnStatus == "00"
        ) {
          list[i].warnStatus = "正常";
        } else if (
          list[i].dataWarnStatus == "01" ||
          list[i].middleWarnStatus == "01" ||
          list[i].relativeWarnStatus == "01"
        ) {
          list[i].warnStatus = "数据预警";
        } else if (
          list[i].dataWarnStatus == "02" ||
          list[i].middleWarnStatus == "02" ||
          list[i].relativeWarnStatus == "02"
        ) {
          list[i].warnStatus = "预警处理中";
        }
      }
      this.tableData = list;
    },
    sensorWarn(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].equipmentWarnStatus != "00") {
          if (
            list[i].warnTime != undefined &&
            list[i].warnTime != null &&
            list[i].warnTime != ""
          )
            list[i].warnTime = moment(list[i].warnTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          if (
            list[i].lastMailTime != undefined &&
            list[i].lastMailTime != null &&
            list[i].lastMailTime != ""
          )
            list[i].lastMailTime = moment(list[i].lastMailTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
        }
      }
      this.tableData2 = list;
    },
    point(id) {
      this.dialog_flag = true;
      this.rowKey = id;
    },
    handle() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"dealType\\":\\"${this.form.mode}\\",\\"dealPerson\\":\\"xnchy\\",\\"id\\":\\"${this.rowKey}\\",\\"comment\\":\\"${this.form.remark}\\"}","serviceCode":"updateDataWarningByPage","timestamp":"","uuid":""}`,
      }).then(() => {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listDataWarning","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.dataWarn(res.data.parameter.list);
        });
      });
      this.dialog_flag = false;
    },
    point2(id) {
      this.dialog_flag2 = true;
      this.rowKey = id;
    },
    handle2() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"dealType\\":\\"${this.form2.mode}\\",\\"dealPerson\\":\\"xnchy\\",\\"id\\":\\"${this.rowKey}\\",\\"comment\\":\\"${this.form2.remark}\\"}","serviceCode":"updateEquipmentWarningByPage","timestamp":"","uuid":""}`,
      }).then(() => {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listEquipmentWarning","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorWarn(res.data.parameter.list);
        });
      });
      this.dialog_flag2 = false;
    },
    // queryDataWarning(list) {
    //   for (let i = 0, len = list.length; i < len; i++) {
    //     list[i].warnTime = moment(list[i].warnTime).format(
    //       "YYYY-MM-DD HH:mm:ss"
    //     );
    //     if (list[i].warnDeal == "00") {
    //       list[i].warnDeals = "数据恢复正常";
    //     } else if (list[i].warnDeal == "01") {
    //       list[i].warnDeals = "1小时内不预警";
    //     } else if (list[i].warnDeal == "02") {
    //       list[i].warnDeals = "6小时内不预警";
    //     } else if (list[i].warnDeal == "03") {
    //       list[i].warnDeals = "1天内不预警";
    //     } else if (list[i].warnDeal == "04") {
    //       list[i].warnDeals = "3天内不预警";
    //     } else if (list[i].warnDeal == "05") {
    //       list[i].warnDeals = "7天内不预警";
    //     }
    //     if (list[i].dealTime != null) {
    //       list[i].dealTime = moment(list[i].dealTime).format(
    //         "YYYY-MM-DD HH:mm:ss"
    //       );
    //     }
    //   }
    //   this.tableData = list;
    // },
    search(currentPage) {
      let queryData = {
        sensorName: this.form.sensorName,
        startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"${currentPage}\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listDataWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData = res.data.parameter.page;
        // this.queryDataWarning(res.data.parameter.list);
      });
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    querySensorWarning(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].warnTime = moment(list[i].warnTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        if (list[i].warnDeal == "00") {
          list[i].warnDeals = "数据恢复正常";
        } else if (list[i].warnDeal == "01") {
          list[i].warnDeals = "1小时内不预警";
        } else if (list[i].warnDeal == "02") {
          list[i].warnDeals = "6小时内不预警";
        } else if (list[i].warnDeal == "03") {
          list[i].warnDeals = "1天内不预警";
        } else if (list[i].warnDeal == "04") {
          list[i].warnDeals = "3天内不预警";
        } else if (list[i].warnDeal == "05") {
          list[i].warnDeals = "7天内不预警";
        }
        if (list[i].dealTime != null) {
          list[i].dealTime = moment(list[i].dealTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      this.tableData2 = list;
    },
    search2(currentPage) {
      let queryData = {
        equipmentName: this.form2.equipmentName,
        startTime: moment(this.form2.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form2.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10},\\"equipmentNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"equipmentName\\":\\"${queryData.equipmentName}\\"}","serviceCode":"listEquipmentWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData2 = res.data.parameter.page;
        this.querySensorWarning(res.data.parameter.list);
      });
    },
    handleCurrentChange2(val) {
      this.search2(val);
    },
    queryWarningLog(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        if (list[i].moduleEnum == "00") {
          list[i].moduleEnum = "卫星业务";
        } else if (list[i].moduleEnum == "01") {
          list[i].moduleEnum = "岩土业务";
        }
        if (list[i].statisticType == "00") {
          list[i].statisticType = "累计值预警";
        } else if (list[i].statisticType == "01") {
          list[i].statisticType = "相对值预警";
        } else if (list[i].statisticType == "02") {
          list[i].statisticType = "中误差预警";
        }
        if (list[i].updateTime != null) {
          list[i].updateTime = moment(list[i].updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      this.tableData3 = list;
    },
    search3(currentPage) {
      let queryData = {
        sensorName: this.form3.sensorName,
        startTime: moment(this.form3.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form3.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"${currentPage}\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listWarningLogByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData3 = res.data.parameter.page;
        this.queryWarningLog(res.data.parameter.list);
      });
    },
    handleCurrentChange3(val) {
      this.search3(val);
    },
  },
  created() {
    let fun = () => {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listDataWarning","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.dataWarn(res.data.parameter.list);
      });
    };
    let fun2 = () => {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listEquipmentWarning","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.sensorWarn(res.data.parameter.list);
      });
    };
    let warningManagement = async () => {
      await fun();
      await fun2();
    };
    warningManagement();
    // let fun3 = () => {
    //   let queryData = {
    //     sensorName: "",
    //     startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
    //     endTime: moment().format("YYYY-MM-DD"),
    //   };
    //   this.form.startTime = moment(queryData.startTime).format(
    //     "YYYY-MM-DD 00:00:00"
    //   );
    //   this.form.startTimeMin = this.form.startTime;
    //   Axios({
    //     url: serviceApi.KB_API,
    //     method: "post",
    //     data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"1\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listDataWarningByPage","timestamp":"","uuid":""}`,
    //   }).then((res) => {
    //     this.pageData = res.data.parameter.page;
    //     this.queryDataWarning(res.data.parameter.list);
    //   });
    // };
    // let fun4 = () => {
    //   let queryData = {
    //     equipmentName: "",
    //     startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
    //     endTime: moment().format("YYYY-MM-DD"),
    //   };
    //   this.form2.startTime = moment(queryData.startTime).format(
    //     "YYYY-MM-DD 00:00:00"
    //   );
    //   this.form2.startTimeMin = this.form2.startTime;
    //   Axios({
    //     url: serviceApi.KB_API,
    //     method: "post",
    //     data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10},\\"equipmentNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"equipmentName\\":\\"${queryData.equipmentName}\\"}","serviceCode":"listEquipmentWarningByPage","timestamp":"","uuid":""}`,
    //   }).then((res) => {
    //     this.pageData2 = res.data.parameter.page;
    //     this.querySensorWarning(res.data.parameter.list);
    //   });
    // };
    // let fun5 = () => {
    //   let queryData = {
    //     sensorName: "",
    //     startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
    //     endTime: moment().format("YYYY-MM-DD"),
    //   };
    //   this.form3.startTime = moment(queryData.startTime).format(
    //     "YYYY-MM-DD 00:00:00"
    //   );
    //   this.form3.startTimeMin = this.form3.startTime;
    //   Axios({
    //     url: serviceApi.KB_API,
    //     method: "post",
    //     data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"1\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listWarningLogByPage","timestamp":"","uuid":""}`,
    //   }).then((res) => {
    //     this.pageData3 = res.data.parameter.page;
    //     this.queryWarningLog(res.data.parameter.list);
    //   });
    // };
    // let WarningLog = async () => {
    //   await fun3();
    //   await fun4();
    //   await fun5();
    // };
    // WarningLog();
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .abs {
    position: absolute;
    left: 0;
    top: 6.4%;
    width: 100%;
    height: 93.6%;
  }
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-dialog__wrapper {
  /deep/ .el-dialog {
    margin: 35vh auto auto auto !important;
    width: 500px;
  }
}
.el-table {
  display: block;
  height: 72vh;
  overflow-y: auto;
  margin-bottom: 20px;
}
.el-table::before {
  z-index: inherit;
}
</style>